import { FC } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import city from "@/assets/images/game/city.png"
import pet from "@/assets/images/game/pet.png"
import world from "@/assets/images/game/world.png"
import chip from "@/assets/images/game/chip.png"
import power from "@/assets/images/game/power.png"
import skill from "@/assets/images/game/skill.png"
import equipment from "@/assets/images/game/equipment.png"
import "./index.scss"

interface IEarlyPlay {}

const EarlyPlay: FC<IEarlyPlay> = () => {

	const { t } = useTranslation()

	return (
		<div id="early-play">
			<div className='early-play-container'>
				<div className="early-play-title">
                    Ea
                    <span className="early-play-title-r">r</span>
					ly gameplay 
                    <span className="early-play-title-st">st</span>
                    age 2
                </div>
				<div className="early-top-box">
					<div className="early-top-item">
						<img className="top-img" src={city} alt="" />
						<div className="early-name">{t('earlyGame.floating')}</div>
						<div className="early-desc">{t('earlyGame.floating1')}</div>
					</div>
					<div className="early-top-item">
						<img className="top-img" src={pet} alt="" />
						<div className="early-name">{t('earlyGame.incubation')}</div>
						<div className="early-desc">{t('earlyGame.incubation1')}</div>
					</div>
					<div className="early-top-item">
						<img className="top-img" src={world} alt="" />
						<div className="early-name">{t('earlyGame.world')}</div>
						<div className="early-desc">{t('earlyGame.world1')}</div>
					</div>
				</div>
				<div className="early-bottom-box">
					<div className="early-bottom-item">
						<img className="chip-img" src={chip} alt="" />
						<p>{t('earlyGame.title')}</p>
					</div>
					<div className="early-bottom-item">
						<img className="chip-img" src={power} alt="" />
						<p>{t('earlyGame.title1')}</p>
					</div>
					<div className="early-bottom-item">
						<img className="chip-img" src={skill} alt="" />
						<p>{t('earlyGame.title2')}</p>
					</div>
					<div className="early-bottom-item">
						<img className="chip-img" src={equipment} alt="" />
						<p>{t('earlyGame.title3')}</p>
					</div>
				</div>
			</div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(EarlyPlay)